<!doctype html>
<html lang="zh-CN" th:replace="admin-layout :: layout(~{::title}, ~{}, ~{::script}, ~{::body}, 'paper-list')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>试卷试题</title>
    <script>
        var $tableA = $("#tableA");
        var $tableB = $("#tableB");
        var $tableC = $("#tableC");
        var $tableD = $("#tableD");
        var $selectQstBtnA = $("#selectQstBtnA");
        var $deleteQstBtnA = $("#deleteQstBtnA");
        var $selectQstBtnB = $("#selectQstBtnB");
        var $deleteQstBtnB = $("#deleteQstBtnB");
        var $selectQstBtnC = $("#selectQstBtnC");
        var $deleteQstBtnC = $("#deleteQstBtnC");
        var $selectQstBtnD = $("#selectQstBtnD");
        var $deleteQstBtnD = $("#deleteQstBtnD");
        var $setQstDefScoreBtnA = $("#setQstDefScoreBtnA");
        var $setQstDefScoreBtnB = $("#setQstDefScoreBtnB");
        var $setQstDefScoreBtnC = $("#setQstDefScoreBtnC");
        var $setQstDefScoreBtnD = $("#setQstDefScoreBtnD");
        var selectionsA = [];
        var selectionsB = [];
        var selectionsC = [];
        var selectionsD = [];

        $selectQstBtnA.click(function () {
            var type = $("#qstType").val();
            var paperId = $("#paperId").val();
            var url = '/admin/paperQuestion/select/question/list/' + paperId + "/" + type;
            openIframe("选择单选题", url, function (ids) {
                ajaxJson("/admin/paperQuestioin/ajax/save", {
                    "qstIds": ids,
                    "qstType": type,
                    "paperId": paperId
                }, function (res) {
                    if (res.status) {
                        refreshTableA();
                    }
                })
            });
        })

        $selectQstBtnB.click(function () {
            var type = $("#qstType").val();
            var paperId = $("#paperId").val();
            var url = '/admin/paperQuestion/select/question/list/' + paperId + "/" + type;
            openIframe("选择多选题", url, function (ids) {
                ajaxJson("/admin/paperQuestioin/ajax/save", {
                    "qstIds": ids,
                    "qstType": type,
                    "paperId": paperId
                }, function (res) {
                    if (res.status) {
                        refreshTableB();
                    }
                })
            });
        })

        $selectQstBtnC.click(function () {
            var type = $("#qstType").val();
            var paperId = $("#paperId").val();
            var url = '/admin/paperQuestion/select/question/list/' + paperId + "/" + type;
            openIframe("选择判断题", url, function (ids) {
                ajaxJson("/admin/paperQuestioin/ajax/save", {
                    "qstIds": ids,
                    "qstType": type,
                    "paperId": paperId
                }, function (res) {
                    if (res.status) {
                        refreshTableC();
                    }
                })
            });
        })

        $selectQstBtnD.click(function () {
            var type = $("#qstType").val();
            var paperId = $("#paperId").val();
            var url = '/admin/paperQuestion/select/question/list/' + paperId + "/" + type;
            openIframe("选择主观题", url, function (ids) {
                ajaxJson("/admin/paperQuestioin/ajax/save", {
                    "qstIds": ids,
                    "qstType": type,
                    "paperId": paperId
                }, function (res) {
                    if (res.status) {
                        refreshTableD();
                    }
                })
            });
        })

        $deleteQstBtnA.click(function () {
            confirmAlert(function () {
                ajaxJson("/admin/paperQuestioin/ajax/delete", {"ids": eval("selections" + $("#qstType").val() + ".toString()"),"paperId":$("#paperId").val()}, function (res) {
                    if (res.status) {
                        refreshTableA();
                    }
                })
            })
        })

        $deleteQstBtnB.click(function () {
            confirmAlert(function () {
                ajaxJson("/admin/paperQuestioin/ajax/delete", {"ids": eval("selections" + $("#qstType").val() + ".toString()"),"paperId":$("#paperId").val()}, function (res) {
                    if (res.status) {
                        refreshTableB();
                    }
                })
            })
        })

        $deleteQstBtnC.click(function () {
            confirmAlert(function () {
                ajaxJson("/admin/paperQuestioin/ajax/delete", {"ids": eval("selections" + $("#qstType").val() + ".toString()"),"paperId":$("#paperId").val()}, function (res) {
                    if (res.status) {
                        refreshTableC();
                    }
                })
            })
        })

        $deleteQstBtnD.click(function () {
            confirmAlert(function () {
                ajaxJson("/admin/paperQuestioin/ajax/delete", {"ids": eval("selections" + $("#qstType").val() + ".toString()"),"paperId":$("#paperId").val()}, function (res) {
                    if (res.status) {
                        refreshTableD();
                    }
                })
            })
        })

        $setQstDefScoreBtnA.click(function () {
            var title = "设置所有单选题分数";
            var id = "";
            var v = "";
            if (selectionsA.length > 0) {
                title = "设置选中试题分数";
                id = selectionsA[0];
                v = getDataSelectionsA()[0];
            }
            layer.prompt({
                value: v,
                title: title,
            }, function (value, index, elem) {
                if (isNumber(value)) {
                    ajaxJson("/admin/paperQuestioin/ajax/update", {"id": id, "qstType": $("#qstType").val(), "paperId": $("#paperId").val(), "qstScore": value}, function (res) {
                        if (res.status) {
                            refreshTableA();
                            layer.close(index);
                        }
                    })
                } else {
                    msgTips("请输入整数")
                }
            });
        })

        $setQstDefScoreBtnB.click(function () {
            var title = "设置所有多选题分数";
            var id = "";
            var v = "";
            if (selectionsB.length > 0) {
                title = "设置选中试题分数";
                id = selectionsB[0];
                v = getDataSelectionsB()[0];
            }
            layer.prompt({
                value: v,
                title: title,
            }, function (value, index, elem) {
                if (isNumber(value)) {
                    ajaxJson("/admin/paperQuestioin/ajax/update", {"id": id, "qstType": $("#qstType").val(), "paperId": $("#paperId").val(), "qstScore": value}, function (res) {
                        if (res.status) {
                            refreshTableB();
                            layer.close(index);
                        }
                    })
                } else {
                    msgTips("请输入整数")
                }
            });
        })

        $setQstDefScoreBtnC.click(function () {
            var title = "设置所有判断题分数";
            var id = "";
            var v = "";
            if (selectionsC.length > 0) {
                title = "设置选中试题分数";
                id = selectionsC[0];
                v = getDataSelectionsC()[0];
            }
            layer.prompt({
                value: v,
                title: title,
            }, function (value, index, elem) {
                if (isNumber(value)) {
                    ajaxJson("/admin/paperQuestioin/ajax/update", {"id": id, "qstType": $("#qstType").val(), "paperId": $("#paperId").val(), "qstScore": value}, function (res) {
                        if (res.status) {
                            refreshTableC();
                            layer.close(index);
                        }
                    })
                } else {
                    msgTips("请输入整数")
                }
            });
        })

        $setQstDefScoreBtnD.click(function () {
            var title = "设置所有主观题分数";
            var id = "";
            var v = "";
            if (selectionsD.length > 0) {
                title = "设置选中试题分数";
                id = selectionsD[0];
                v = getDataSelectionsD()[0];
            }
            layer.prompt({
                value: v,
                title: title,
            }, function (value, index, elem) {
                if (isNumber(value)) {
                    ajaxJson("/admin/paperQuestioin/ajax/update", {"id": id, "qstType": $("#qstType").val(), "paperId": $("#paperId").val(), "qstScore": value}, function (res) {
                        if (res.status) {
                            refreshTableD();
                            layer.close(index);
                        }
                    })
                } else {
                    msgTips("请输入整数")
                }
            });
        })

        var columns = [{
            checkbox: true
        }, {
            field: 'content',
            title: '试题内容',
        }, {
            field: 'qstScore',
            title: '试题分数',
        }]

        //$(this).serialize()
        $(function () {
            initTable($tableA, columns, function () {
                $deleteQstBtnA.prop('disabled', !$tableA.bootstrapTable('getSelections').length);

                selectionsA = getIdSelectionsA()
            })
            $("#qstType").val("B");
            initTable($tableB, columns, function () {
                $deleteQstBtnB.prop('disabled', !$tableB.bootstrapTable('getSelections').length);

                selectionsB = getIdSelectionsB()
            })
            $("#qstType").val("C");
            initTable($tableC, columns, function () {
                $deleteQstBtnC.prop('disabled', !$tableC.bootstrapTable('getSelections').length);

                selectionsC = getIdSelectionsC()
            })
            $("#qstType").val("D");
            initTable($tableD, columns, function () {
                $deleteQstBtnD.prop('disabled', !$tableD.bootstrapTable('getSelections').length);

                selectionsD = getIdSelectionsD()
            })
            $("#qstType").val("A");
        })

        function getIdSelectionsA() {
            return $.map($tableA.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function getIdSelectionsB() {
            return $.map($tableB.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function getIdSelectionsC() {
            return $.map($tableC.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function getIdSelectionsD() {
            return $.map($tableD.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function getDataSelectionsA() {
            return $.map($tableA.bootstrapTable('getSelections'), function (row) {
                return row.qstScore
            })
        }

        function getDataSelectionsB() {
            return $.map($tableB.bootstrapTable('getSelections'), function (row) {
                return row.qstScore
            })
        }

        function getDataSelectionsC() {
            return $.map($tableC.bootstrapTable('getSelections'), function (row) {
                return row.qstScore
            })
        }

        function getDataSelectionsD() {
            return $.map($tableD.bootstrapTable('getSelections'), function (row) {
                return row.qstScore
            })
        }

        //标签页切换
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var type = $(this).data("type")
            $("#qstType").val(type);
            // eval("refreshTable"+type+"()");
        })

        function refreshTableA() {
            $tableA.bootstrapTable('refresh')
        }

        function refreshTableB() {
            $tableB.bootstrapTable('refresh')
        }

        function refreshTableC() {
            $tableC.bootstrapTable('refresh')
        }

        function refreshTableD() {
            $tableD.bootstrapTable('refresh')
        }

        $(document).on("change input", ".qstScore", function () {
            var id = $(this).data("id");
            var qstScore = $(this).val();
            ajaxJson("/admin/paperQuestioin/ajax/save", {"id": id, "qstScore": qstScore}, function (res) {
                if (res.status) {

                }
            })
        })
    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/paper/list}">试卷列表</a></li>
    <li class="active">试卷试题</li>
</ol>
<form id="toolbar">
    <input type="hidden" name="paperId" id="paperId" th:value="${paperId}">
    <input type="hidden" name="qstType" id="qstType" value="A">
</form>
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#radio" aria-controls="radio" data-type="A" role="tab"
                                                  data-toggle="tab">单选题</a></li>
        <li role="presentation"><a href="#checkbox" aria-controls="checkbox" data-type="B" role="tab"
                                   data-toggle="tab">多选题</a></li>
        <li role="presentation"><a href="#judge" aria-controls="judge" data-type="C" role="tab"
                                   data-toggle="tab">判断题</a></li>
        <li role="presentation"><a href="#subjective" aria-controls="subjective" data-type="D" role="tab"
                                   data-toggle="tab">主观题</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="radio">
            <div class="fyl-mb20">
                <button type="button" class="btn btn-primary" id="selectQstBtnA">选择试题</button>
                <button type="button" class="btn btn-primary" id="setQstDefScoreBtnA">设置试题分数</button>
                <button type="button" class="btn btn-danger" id="deleteQstBtnA" disabled>删除试题</button>
            </div>
            <!--单选题-->
            <table id="tableA" data-url="/admin/paperQuestion/ajax/list"></table>
        </div>
        <div role="tabpanel" class="tab-pane" id="checkbox">
            <div class="fyl-mb20">
                <button type="button" class="btn btn-primary" id="selectQstBtnB">选择试题</button>
                <button type="button" class="btn btn-primary" id="setQstDefScoreBtnB">设置试题分数</button>
                <button type="button" class="btn btn-danger" id="deleteQstBtnB" disabled>删除试题</button>
            </div>
            <!--多选题-->
            <table id="tableB" data-url="/admin/paperQuestion/ajax/list"></table>
        </div>
        <div role="tabpanel" class="tab-pane" id="judge">
            <div class="fyl-mb20">
                <button type="button" class="btn btn-primary" id="selectQstBtnC">选择试题</button>
                <button type="button" class="btn btn-primary" id="setQstDefScoreBtnC">设置试题分数</button>
                <button type="button" class="btn btn-danger" id="deleteQstBtnC" disabled>删除试题</button>
            </div>
            <!--判断题-->
            <table id="tableC" data-url="/admin/paperQuestion/ajax/list"></table>
        </div>
        <div role="tabpanel" class="tab-pane" id="subjective">
            <div class="fyl-mb20">
                <button type="button" class="btn btn-primary" id="selectQstBtnD">选择试题</button>
                <button type="button" class="btn btn-primary" id="setQstDefScoreBtnD">设置试题分数</button>
                <button type="button" class="btn btn-danger" id="deleteQstBtnD" disabled>删除试题</button>
            </div>
            <!--主观题-->
            <table id="tableD" data-url="/admin/paperQuestion/ajax/list"></table>
        </div>
    </div>

</div>

<!--<div class="row">
    <div class="col-lg-12">
    </div>
    <div class="col-lg-3">
        <h2 id="paperName"></h2>
        <button type="button" class="btn btn-success fyl-mb20" id="addQuestionBtn">选择试题</button>
        <ul class="list-unstyled admin-question-type">
            <li>单选题：<span id="AIdNum">0</span>道</li>
            <li>多选题：<span id="BIdNum">0</span>道</li>
            <li>判断题：<span id="CIdNum">0</span>道</li>
            <li>主观题：<span id="DIdNum">0</span>道</li>
        </ul>
    </div>
</div>-->

</body>
</html>